<template>
	<el-card>
		<div slot="header" class="clearfix">
			<h3>班级数据</h3>
		</div>
		<!-- 搜索栏 -->
		<div class="search-box">
			<el-select v-model="classesSearchData.type" placeholder="请选择">
				<el-option label="班级名称" value="name"></el-option>
				<el-option label="专业" value="subjectsId.name"></el-option>
				<!-- <el-option label="班主任" value="directorsId"></el-option> -->
			</el-select>
			<el-input v-model='classesSearchData.value' placeholder="请输入内容"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="searchClasses">搜索</el-button>
		</div>
		<!-- 班级数据列表渲染栏 -->
		<el-table :data="classesData" stripe style="width: 100%">
			<el-table-column prop="_id" label="班级编号" width="220" align="center">
			</el-table-column>
			<el-table-column prop="name" label="班级名称" align="center">
			</el-table-column>
			<el-table-column prop="subjectsId.name" label="所属专业" align="center">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="toUpdateVue(scope.row._id)">修改</el-button>
					<el-button size="mini" type="danger" @click="deleteOneClassSubmit(scope.row._id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 页面数据和分页等 -->
		<div class="pages-data">
			<el-row>
				<el-col :span="8">
					<el-pagination layout="total" :total="total">
					</el-pagination>
				</el-col>
				<el-col :span="8">
					<el-pagination :current-page="classesSearchData.currentPage" @current-change="handleCurrentChange"
						:page-size="classesSearchData.pageSize" layout="prev, pager, next, jumper" :total="total">
					</el-pagination>
				</el-col>
				<el-col :span="8">
					<el-pagination :page-sizes="[4, 8, 12, 16]" @size-change="handleSizeChange"
						:page-size="classesSearchData.pageSize" layout="sizes">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
	</el-card>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	// 引入班级辅助函数
	const {
		mapState,
		mapMutations,
		mapActions
	} = createNamespacedHelpers(
		"classes"
	);
	export default {
		computed: {
			...mapState([
				"pages",
				"total",
				"classesData",
				"classesSearchData",
			]),
		},
		mounted() {
			// 进入页面加载班级列表
			this.getClasses();
		},
		watch: {
			"classesSearchData.currentPage"() {
				this.getClasses();
			},
			"classesSearchData.pageSize"() {
				this.getClasses();
			},
			"classesSearchData.value"(val) {
				if (!val) {
					this.getClasses();
				}
			}
		},
		methods: {
			...mapMutations(["setCurrentPage", "setPageSize"]),
			...mapActions(["getClasses", "deleteOneClass"]),
			// 删除一个班级
			async deleteOneClassSubmit(_id) {
				const res = await this.deleteOneClass(_id);
				if (res.code) {
					this.$message({
						message: '删除成功！',
						type: 'success',
						center: true,
					});
					this.getClasses();
				} else {
					this.$message({
						message: res.message || '删除失败！',
						type: 'error',
						center: true,
					});
				}
			},
			handleSizeChange(val) {
				this.setPageSize(val);
			},
			handleCurrentChange(val) {
				this.setCurrentPage(val);
			},
			// toUpdateVue(_id) {
			// 	this.$router.push('/home/studentUpdate/' + _id);
			// },
			searchClasses() {
				this.getClasses();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.el-card {
		.search-box {
			width: 100%;
			display: flex;
		}

		;

		.clearfix:before,
		.clearfix:after {
			display: table;
			content: "";
		}

		.clearfix:after {
			clear: both
		}

		.el-row {
			padding: 10px 5px;

			.el-col {
				&:last-child {
					text-align: right;
				}
			}
		}

		.el-button-group {
			padding: 20px 0px;
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.pages-data {
			margin-top: 20px;
			width: 100%;
		}
	}
</style>